<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <!-- <div class="serchbox">
                    <div class="left">
                        <el-select v-model="queryData.certified" placeholder="Select">
                            <el-option label="全部" value="" />
                            <el-option label="已审核" value="2" />
                            <el-option label="未审核" value="1" />
                        </el-select>
                    </div>
                    <div class="right">
                        <div>管理范围：<span>重庆市</span></div>
                        <div class="btn" v-if="queryData.certified == '1'">
                            <el-button type="primary" text bg @click="failTheAudit">审核不通过</el-button>
                            <el-button type="primary" text bg @click="passTheAudit">审核通过</el-button>
                        </div>
                    </div>
                </div> -->
                <div class="foncBox">
                    <div class="left">
                        <el-input v-model="queryData.keyWords" style="width: 300px" placeholder="搜索名字、平台账号、证件号码等信息。">
                            <template #suffix>
                                <el-icon class="el-input__icon"><search /></el-icon>
                            </template>
                        </el-input>
                        <el-button type="primary" class="leftBtn" text bg @click="paginaClick(1)">搜索</el-button>
                    </div>
                    <el-button type="primary" text bg :icon="Refresh" @click="getPageData">刷新</el-button>
                </div>
            </template>
            <div class="foncBox">
                <div class="left">
                    <addRess class="forminput" style="width: 300px" :value="''" :key="1"></addRess>
                    <span>*授权管理范围</span>
                </div>
                <div class="right">
                    <div class="item" @click="condition('')">全部列表</div>
                    <div class="item" @click="condition('2')">已认证</div>
                    <div class="item" @click="condition('1')">未认证</div>
                    <div class="item" @click="condition('-1')">未通过</div>
                </div>
            </div>
            <el-table :data="pageData.list" style="width: 100%; margin-top: 20px" border ref="tableData">
                <!-- <el-table-column type="selection" v-if="queryData.certified == '1'" width="55" /> -->
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="申请人名字" width="120"></el-table-column>
                <el-table-column prop="nickName" label="联系电话" width="120"></el-table-column>
                <el-table-column prop="nickName" label="平台账号" width="120"></el-table-column>
                <el-table-column prop="idNum" label="证件号码" width="200"></el-table-column>
                <el-table-column prop="nickName" label="常住地址"></el-table-column>
                <el-table-column prop="nickName" label="正面" width="150"></el-table-column>
                <el-table-column prop="nickName" label="背面" width="150"></el-table-column>
                <el-table-column prop="nickName" label="手持件照" width="150"></el-table-column>
                <!-- <el-table-column prop="nickName" label="证件类型">
                    <template #default="scope">
                        {{ scope.row.idType == "1" ? "身份证" : scope.row.idType == "2" ? "护照" : scope.row.idType == "3" ? "居住证" : "" }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="idNum" label="证件号码"></el-table-column> -->
                <!-- <el-table-column prop="createTime" label="提交认证日期"> </el-table-column> -->
                <el-table-column prop="" label="审核状态" width="150">
                    <template #default="scope">
                        {{ scope.row.certified == "1" ? "未审核" : scope.row.certified == "2" ? "已审核" : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template #default>
                        <el-button type="primary" size="small" link @click="topages('/maintenance/personalmanagement/personalattestationmsg')">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { getPersonalCertificate, passTheAudits, failTheAudits } from "@/api/maintenance";
import { ElMessage, ElMessageBox } from "element-plus";
import { Refresh } from "@element-plus/icons-vue";
const router = useRouter();
const topages = (url: string) => {
    router.push(url);
};
const pageData = reactive({
    list: [],
    total: 0,
});
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    certified: "",
    keyWords: "",
});
const getPageData = () => {
    getPersonalCertificate(queryData).then((res: any) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
    });
};
getPageData();
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
// watch(
//     () => queryData.certified,
//     (val: any) => {
//         paginaClick(1);
//     }
// );
const condition = (type: string) => {
    queryData.certified = type;
    paginaClick(1);
};
const tableData: any = ref(null);
// const failTheAudit = () => {
//     let list = tableData?.value.getSelectionRows();
//     if (list.length < 1) {
//         ElMessage.error("请先选择要操作的对象");
//         return;
//     }
//     ElMessageBox.prompt("请输入不通过理由", "提示", {
//         confirmButtonText: "确定",
//         cancelButtonText: "取消",
//     }).then(({ value }) => {
//         let pa: any = [];
//         list.forEach((v: any) => {
//             pa.push(v.userId);
//         });
//         failTheAudits({
//             userIds: pa,
//         }).then((res: any) => {
//             console.log(res);
//             ElMessage.success("操作成功");
//             getPageData();
//         });
//     });
// };
// const passTheAudit = () => {
//     let list = tableData?.value.getSelectionRows();
//     if (list.length < 1) {
//         ElMessage.error("请先选择要操作的对象");
//         return;
//     }
//     ElMessageBox.confirm("审核操作，确认无误后继续", "提示", {
//         confirmButtonText: "确定",
//         cancelButtonText: "取消",
//         type: "warning",
//     }).then(() => {
//         let pa: any = [];
//         list.forEach((v: any) => {
//             pa.push(v.userId);
//         });
//         passTheAudits({
//             userIds: pa,
//         }).then((res: any) => {
//             console.log(res);
//             ElMessage.success("操作成功");
//             getPageData();
//         });
//     });
// };
</script>
<style scoped lang="scss">
.operatingrecord {
    // .serchbox {
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //     .left {
    //         display: flex;
    //         justify-content: flex-start;
    //         align-items: center;
    //         .item {
    //             margin-right: 20px;
    //             color: #333333;
    //             font-size: 14px;
    //             .serchs {
    //                 width: 300px;
    //             }
    //         }
    //     }
    //     .right {
    //         color: #333333;
    //         font-size: 14px;
    //         display: flex;
    //         align-items: center;
    //         span {
    //             color: #555555;
    //         }
    //         .btn {
    //             margin-left: 20px;
    //         }
    //     }
    // }
    .foncBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .leftBtn {
                margin-left: 10px;
            }
            span {
                font-weight: 300;
                margin-left: 10px;
                font-size: 12px;
                color: #999999;
            }
        }
        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .item {
                padding: 0 18px;
                height: 38px;
                line-height: 38px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
}
</style>
